<template>
  <l-layout class="l-tab-page" v-show="!lr_loadPage">
    <l-layout :bottom="400">
      <l-panel style="padding-bottom: 0;">
        <template #toolRight>
          <l-tool-btns @click="handleAdd()">
            <el-button-group> </el-button-group>
          </l-tool-btns>
        </template>
        <l-table
          ref="mainTable"
          :loading="tableLoading"
          :columns="columns"
          :dataSource="tableData"
          :isPage="true"
          :pageTotal="tableTotal"
          :tablePage.sync="tableCurrentPage"
          @loadPageData="turnTablePage"
          @rowClick="handleRowClick"
          :highlightCurrentRow="true"
        >
          <l-table-btns
            :btns="tableBtns"
            @click="lr_handleTableBtnClick"
          ></l-table-btns>
        </l-table>
      </l-panel>

      <template #bottom>
        <div class="l-rblock">
          <div class="l-rblock" style="height: 50%;">
            <l-panel style="padding-bottom: 4px;padding-top: 0;">
              <l-table
                ref="childTable"
                :loading="ctableLoading"
                :columns="ccolumns"
                :dataSource="ctableData"
                @rowClick="handleCRowClick"
                :highlightCurrentRow="true"
              >
                <l-table-btns
                  :btns="ctableBtns"
                  @click="lr_handleTableBtnClick"
                ></l-table-btns>
              </l-table>
            </l-panel>
          </div>
          <div class="l-rblock" style="height: 50%;">
            <l-panel style="padding-top: 0;">
              <l-table
                ref="grandsonTable"
                :loading="gtableLoading"
                :columns="gcolumns"
                :dataSource="gtableData"
              >
                <l-table-btns
                  :btns="gtableBtns"
                  @click="lr_handleTableBtnClick"
                ></l-table-btns>

                <template v-slot:f_chs="scope">
                  <el-input
                    size="mini"
                    v-model="scope.row.f_chs"
                    :placeholder="$t('please enter')"
                    @blur="inputblur(scope)"
                    oninput="value=value.replace(/[^\d]/g,'')"
                  >
                  </el-input>
                </template>
              </l-table>
            </l-panel>
          </div>
        </div>
      </template>
    </l-layout>

    <!--表单-->
    <l-dialog
      :title="$t(formTitle)"
      :visible.sync="formVisible"
      :height="700"
      :width="900"
      @ok="handleSave"
      @close="handleCloseForm"
      @opened="handleOpenedForm"
    >
      <my-form ref="form"></my-form>
    </l-dialog>
  </l-layout>
</template>

<script>
import MyForm from "./form";
const api = window.$api.demo.matecarbasic;
export default {
  components: {
    MyForm,
  },
  data() {
    return {
      lr_isPage: true,
      moduleCode: "demo_matecarbasic",
      // query参数
      queryData: {},
      queryItems: [],

      // 表格参数
      tableLoading: false,
      tableData: [],
      tableTotal: 0,
      tableCurrentPage: 1,
      tablePageSize: 50,
      columns: [
        {
          label: "配车单号",
          prop: "f_pcdh",
          minWidth: 120,
          align: "left",
          dataType: "encode",
        },
        {
          label: "单据日期",
          prop: "f_djrq",
          minWidth: 120,
          align: "left",
          dataType: "datetime",
          format: "yyyy-MM-dd",
        },
        {
          label: "运输车辆",
          prop: "f_yscl",
          minWidth: 120,
          align: "left",
          dataType: "input",
        },
        {
          label: "驾驶员",
          prop: "f_jsybh",
          minWidth: 80,
          align: "left",
          dataType: "dataItem",
          dataCode: "jsy",
        },
        {
          label: "客户",
          prop: "f_kh",
          minWidth: 200,
          align: "left",
          dataType: "dataItem",
          dataCode: "kh",
        },
        {
          label: "备注",
          prop: "f_bz",
          minWidth: 120,
          align: "left",
          dataType: "input",
        },
        {
          label: "制单人",
          prop: "f_zdr",
          minWidth: 120,
          align: "left",
          dataType: "user",
        },
        {
          label: "制单时间",
          prop: "f_zdsj",
          minWidth: 120,
          align: "left",
          dataType: "datetime",
          format: "yyyy-MM-dd HH:mm:ss",
        },
      ],
      tableBtns: [
        { prop: "CreateDelivery", label: "生成送货单", width: 70 },
        { prop: "Edit", label: "Edit" },
        // {prop:'Delete',label:'Delete'},
      ],

      // 表单参数
      formVisible: false,
      formTitle: "",
      formEditRow: null,
      formEdit: false,
      cformVisible: false,
      cformTitle: "",
      cformEditRow: null,
      cformEdit: false,

      // 子表代码
      ctableLoading: false,
      ctableData: [],
      ctableTotal: 0,
      ctableCurrentPage: 1,
      ctablePageSize: 50,
      ceditid: "",
      ctableBtns: [
        // {prop:'CEdit',label:'Edit'},
      ],
      ccolumns: [
        { label: "订单编号", prop: "f_ddbh", minWidth: 120, align: "left" },
        {
          label: "客户",
          prop: "f_khbh",
          minWidth: 120,
          align: "left",
          dataType: "dataItem",
          dataCode: "kh",
        },
        { label: "订单编号", prop: "f_ddbh", minWidth: 120, align: "left" },
        { label: "产品编号", prop: "f_cpbh", minWidth: 120, align: "left" },
        { label: "产品规格", prop: "f_cpgg", minWidth: 120, align: "left" },
        {
          label: "本次发货数量",
          prop: "f_bcfhsl",
          minWidth: 120,
          align: "left",
        },
      ],

      // 孙表代码
      gtableLoading: false,
      gtableData: [],
      gtableTotal: 0,
      gtableCurrentPage: 1,
      gtablePageSize: 50,
      geditid: "",
      gtableBtns: [
        // {prop:'GEdit',label:'Edit'},
        // {prop:'GDelete',label:'Delete'},
      ],
      gcolumns: [
        { label: "产品编号", prop: "f_cpbh", minWidth: 120, align: "left" },
        { label: "库位编号", prop: "f_kwbh", minWidth: 120, align: "left" },
        { label: "库存数", prop: "f_kcs", minWidth: 120, align: "left" },
        { label: "出货数", prop: "f_chs", minWidth: 120, align: "left" },
      ],
    };
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.loadTableData();
    },

    handleSearch() {
      this.loadTableData(true);
    },
    turnTablePage({ rows }) {
      this.tablePageSize = rows;
      this.loadTableData(true);
    },
    async loadTableData(isNotFirst) {
      if (!isNotFirst) {
        this.tableCurrentPage = 1;
      }
      this.tableLoading = true;
      let queryData = this.$deepClone(this.queryData);

      queryData.rows = this.tablePageSize;
      queryData.page = this.tableCurrentPage;
      queryData.sidx = "f_zdsj ASC";
      let data = await this.$awaitWraper(api.getPage(queryData));
      if (data != null) {
        this.tableData = data.rows;
        this.tableTotal = data.records;
      } else {
        this.tableData = [];
      }
      this.tableLoading = false;
    },

    handleAdd() {
      this.formEdit = false;
      this.handleShowForm();
    },
    handleEdit($index, row) {
      this.formEdit = true;
      this.formEditRow = row;
      this.handleShowForm();
    },
    handleDelete($index, row) {
      this.$confirm(
        this.$t("This operation will permanently delete the data. Do you want to continue?"),
        this.$t("Tips"),
        {
          confirmButtonText: this.$t("confirm"),
          cancelButtonText: this.$t("cancel"),
          type: "warning",
        }
      )
        .then(async () => {
          this.tableData.splice($index, 1);
          this.tableTotal--;
          await api.remove(row.f_Id);
          this.$message({
            type: "success",
            message: this.$t("Delete  success"),
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t("Delete has been canceled!"),
          });
        });
    },

    async handleSave(showLoading, hideLoading) {
      showLoading("saving data...");
      if (await this.$refs.form.validateForm()) {
        const res = await this.$refs.form.saveForm({
          keyValue: this.formEdit ? this.formEditRow.f_Id : "",
          isEdit: this.formEdit,
        });
        if (res) {
          const msg = this.formEdit ? "更新成功!" : "Add成功!";
          this.$message({
            type: "success",
            message: this.$t(msg),
          });
          this.loadTableData();
          this.formVisible = false;
        }
      }
      hideLoading();
    },

    handleShowForm(text) {
      this.formTitle = text;
      this.formVisible = true;
    },
    async handleOpenedForm(showLoading, hideLoading) {
      if (this.formEdit) {
        showLoading("Loading data...");
        await this.$refs.form.loadFormData({ keyValue: this.formEditRow.f_Id });
        hideLoading();
      }
    },
    handleCloseForm() {
      this.$refs.form.resetForm();
    },
    // 主表点击事件
    handleRowClick({ row }) {
      let queryData = {};
      queryData.F_matecarbasicId = row.f_Id;
      queryData.rows = this.ctablePageSize;
      queryData.page = this.ctableCurrentPage;
      queryData.sidx = "F_ddbh ASC";
      api.getCData(queryData).then((res) => {
        // console.log(res,"res");
        if (res.data.data.rows) {
          this.ctableData = res.data.data.rows;
          this.gtableData = [];
        }
      });
    },
    // 子表点击事件
    handleCRowClick({ row }) {
      let queryData = {};
      queryData.F_matecardetailId = row.f_Id;
      queryData.rows = this.ctablePageSize;
      queryData.page = this.ctableCurrentPage;
      queryData.sidx = "F_kwbh ASC";
      api.getGData(queryData).then((res) => {
        // console.log(res,"res");
        if (res.data.data.rows) {
          this.gtableData = res.data.data.rows;
        }
      });
    },
    // 生成送货单
    handleCreateDelivery($index, row) {
      this.$confirm(this.$t("此操作将生成送货单, 是否继续?"), this.$t("Tips"), {
        confirmButtonText: this.$t("confirm"),
        cancelButtonText: this.$t("cancel"),
        type: "warning",
      })
        .then(async () => {
          await api.CreateDelivery(row.f_Id);
          this.$message({
            type: "success",
            message: this.$t("生成成功!"),
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t("已cancel生成!"),
          });
        });
    },
    handleCDelete() {},
    inputblur(scope) {
      if (scope.row.f_chs > scope.row.f_kcs) {
        this.$message({
          type: "error",
          message: this.$t("出货数不可大于库存数!"),
        });
      }
    },
  },
};
</script>
